<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>管理员后台 - 图书管理</title>
    <link rel="stylesheet" th:href="@{/css/admin.css}"/>
</head>
<body>
<header>
    <h1>管理员后台 - 图书管理</h1>
    <nav>
        <a th:href="@{/}" class="btn-link">返回首页</a>
    </nav>
</header>

<main>
    <section class="search-section">
        <form th:action="@{/admin}" method="get" class="search-form">
            <label>
                <input
                        type="text"
                        name="keyword"
                        th:value="${keyword}"
                        placeholder="搜索书名或作者"
                        class="input-text"
                        autocomplete="off"
                />
            </label>
            <button type="submit" class="btn-primary">搜索</button>
        </form>
    </section>

    <section class="add-book-section">
        <h2>添加新书</h2>
        <form th:action="@{/admin/add}" method="post" class="form-inline">
            <label>
                <input name="title" placeholder="书名" required class="input-text"/>
            </label>
            <label>
                <input name="author" placeholder="作者" required class="input-text"/>
            </label>
            <label>
                <input name="price" type="number" step="0.01" placeholder="价格" required class="input-number"/>
            </label>
            <label>
                <input name="stock" type="number" placeholder="库存" required class="input-number"/>
            </label>
            <button type="submit" class="btn-primary">添加</button>
        </form>
    </section>

    <section class="book-list-section">
        <h2>图书列表</h2>
        <table class="data-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格 (元)</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="book : ${books}">
                <form th:action="@{/admin/update}" method="post" class="update-form">
                    <input type="hidden" name="id" th:value="${book.id}"/>
                    <td th:text="${book.id}"></td>
                    <td><label>
                        <input name="title" th:value="${book.title}" class="input-text"/>
                    </label></td>
                    <td><label>
                        <input name="author" th:value="${book.author}" class="input-text"/>
                    </label></td>
                    <td><label>
                        <input name="price" type="number" step="0.01" th:value="${book.price}"
                               class="input-number"/>
                    </label></td>
                    <td><label>
                        <input name="stock" type="number" th:value="${book.stock}" class="input-number"/>
                    </label></td>
                    <td class="action-cell">
                        <button type="submit" class="btn-update">更新</button>
                </form>
                <form th:action="@{/admin/delete}" method="post" class="delete-form"
                      onsubmit="return confirm('确认删除？');">
                    <input type="hidden" name="id" th:value="${book.id}"/>
                    <button type="submit" class="btn-delete">删除</button>
                </form>
            </tr>
            </tbody>
        </table>

        <nav class="pagination" aria-label="分页导航">
      <span th:each="i : ${#numbers.sequence(1, totalPages)}">
        <a
                th:href="@{/admin(keyword=${keyword}, page=${i})}"
                th:text="${i}"
                th:classappend="${i == page} ? 'active' : ''"
                aria-current="page"
        >页码</a
        >
        &nbsp;
      </span>
        </nav>
    </section>

    <section class="add-user-section">
        <h2>添加新用户</h2>
        <form th:action="@{/admin/user/add}" method="post" class="form-inline">
            <label>
                <input name="username" placeholder="用户名" required class="input-text"/>
            </label>
            <label>
                <input name="password" type="password" placeholder="密码" required class="input-text"/>
            </label>
            <label>
                <select name="role" required class="select-role">
                    <option value="" disabled selected>请选择角色</option>
                    <option value="ADMIN">管理员</option>
                    <option value="CUSTOMER">客户</option>
                </select>
            </label>
            <button type="submit" class="btn-primary">添加用户</button>
        </form>
    </section>
</main>

<footer>
    <p>书店系统 &copy; 2025</p>
</footer>
</body>
</html>